<!DOCTYPE HTML)
<html>
	<head>
		<title>数组操作</title>
		<meta charset='utf-8'>
		
		<style>
			div {
				background: #f0f0f0;
				border:1px dotted #333 ;
				padding: 10px 15px;
				color:green;
				font-size: 14px;
			}
		</style>


	</head>

	<body>
		<div>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</div>
		<input type="button" value='删除January（1）'>
		<input type="button" value='删除December（12）'>
		<div>0,1,2,3,4,5,6,7,8,9</div>
		<input type="button" value='复制'>
		<input type="button" value='还原'>
		<div>red,green,blue,white,yellow,black,brown</div>
		<input type="button" value='还原'>
		<input type="button" value='删除前三项'>
		<input type="button" value='删除第二至第三项'>
		<input type="button" value='第二项后插入'>
		<input type="button" value='替换第二项和第三项'>
	</body>

	<script>
	var oDiv = document.getElementsByTagName('div');
	var oInput = document.getElementsByTagName('input');
	var aTmp=[];
	// 转换为数组
	function getArray(str) {
		aTmp.length=0;
		str = str.split(',');
		for(var i in str) aTmp.push(str[i]);
			return aTmp;
	}

	window.onload=function() {
		// 删除january(1)
		oInput[0].onclick=function() {
			aTmp = getArray(oDiv[0].innerHTML);
			this.value == '删除January（1）' ? 
			(aTmp.shift(),this.value='增加January（1）'): (aTmp.unshift('January（1）'),this.value='删除January（1）');
			// 将数组以字符串形式返回，默认分隔符为不带空格的,
			oDiv[0].innerHTML = aTmp.join();
		}
		// 删除December（12）
		oInput[1].onclick=function() {
			aTmp = getArray(oDiv[0].innerHTML);
			this.value == '删除December（12）' ? 
			(aTmp.pop(),this.value='增加December（12）'): (aTmp.push('December（12）'),this.value='删除December（12）');
			// 将数组以字符串形式返回，默认分隔符为不带空格的,
			oDiv[0].innerHTML = aTmp.join();
		}

		// 复制;返回值的问题

		oInput[2].onclick=function() {
			aTmp = getArray(oDiv[1].innerHTML);
			oDiv[1].innerHTML = aTmp.concat(aTmp).join();
		}

		// 还原
		oInput[3].onclick=function() {
			aTmp = getArray(oDiv[1].innerHTML);
			aTmp.length=10;
			oDiv[1].innerHTML = aTmp.join();
		}

		// 第三组数据还原
		oInput[4].onclick=function() {
			aTmp = ["red","green","blue","white","yellow","black","brown"];
			//输出
			oDiv[2].innerHTML = aTmp.join()
		}

		// 删除前三项
		oInput[5].onclick=function() {
			aTmp = getArray(oDiv[2].innerHTML);
			aTmp.splice(0,3);
			oDiv[2].innerHTML = aTmp.join()
		}

		// 删除第二至第三项
		oInput[6].onclick=function() {
			aTmp = getArray(oDiv[2].innerHTML);
			aTmp.splice(1,2);
			oDiv[2].innerHTML = aTmp.join()
		}

		// 第二项后插入
		oInput[7].onclick=function() {
			aTmp = getArray(oDiv[2].innerHTML);
			aTmp.splice(2,0,'插','入','的','元','素');
			oDiv[2].innerHTML = aTmp.join()
		}

		// 替换第二项和第三项
		oInput[8].onclick=function() {
			aTmp = getArray(oDiv[2].innerHTML);
			aTmp.splice(1,2,'元','素');
			oDiv[2].innerHTML = aTmp.join()
		}
	}
	</script>
</html>